<template>

    <div id="ChangBei" style="width: 300px;height: 200px;border:1px solid #2CC3CF;">
        <div v-for="medicine in tableData">
            <div>
                <div id="left">
                    <img :src="medicine.medicinePicture"width="150px" height="150px" alt
                         style="border: 1px solid #42B983;"/>

                    <div style="position: absolute;margin-top: -150px; margin-left: 300px;">
                        <el-tag color="white" style="color: orangered;font-size: 15px;border: 0px;">药品名称:</el-tag>
                        <el-input v-model="medicine.medicineName" :disabled="true"
                                  style="width: 300px;height: 20px;
                              position: absolute;
                              margin-left: 10px;
                              margin-top:0px;
                              font-size: 15px;"
                                  placeholder="药品名称">
                        </el-input>
                    </div>

                    <div style="position: absolute;margin-top: -100px; margin-left: 300px;">
                        <el-tag color="white" style="color: orangered;font-size: 15px;border: 0px;">药品数量:</el-tag>
                        <el-input v-model="medicine.medicineNumber" :disabled="true"
                                  style="width: 100px;height: 20px;position: absolute;margin-top: -5px;margin-left: 10px;font-size: 13px;"
                                  placeholder="药品数量"></el-input>
                    </div>

                    <div style="position: absolute;margin-top: -40px; margin-left: 300px;">
                        <el-tag color="white"
                                style="color: orangered;font-size: 30px;border: 0px;">¥
                        </el-tag>
                        <el-input v-model="medicine.medicineUnivalence" :disabled="true"
                                  style="width: 100px;height: 20px;position: absolute;margin-top: -5px;margin-left: 10px;font-size: 15px;"
                                  placeholder="药品价格"></el-input>


                        <el-input-number v-model="num" @change="handleChange" :min="1" :max="100" label="描述文字"
                                         style="transform: scale(0.8);margin-left: 200px"></el-input-number>
                        <el-button type="success" v-model="buy" style="margin-left: 100px">购买</el-button>
                    </div>
                </div>
                <br><br>
            </div>
        </div>


    </div>

</template>
<script>
    export default {
        props: ['name'],
        data() {
            return {
                tableData: [{
                    medicinePicture: '',
                    medicineName: "",
                    medicineUnivalence: "",
                    medicineNumber: ""

                }],
                num: 1,
                medicineSort: ''

            }
        },
        mounted() {
            var that = this
            this.$axios.post("http://localhost:8088/xiaoxiang/findAllMedicineSort",{
                medicineSort:this.name
            }).then(function (response) {
                    console.log(response)
                    that.tableData = response.data.data
                    // eslint-disable-next-line no-unused-vars
                }).catch(function (error) {
                })
        },
        beforeRouteEnter: (to, from, next) => {
            next();
        }
    }
</script>

<style>
</style>
